<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Jquery-table</title>
	<link rel="stylesheet" href="statics/css/table1.css">
</head>
<body>
	<table border="1">
		<thead>
		<tr><th colspan="5" class="tableheader">采购清单</th></tr>
		
			<tr>
				<th>序号</th>
				<th>商品名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>操作</th>
			</tr>
		</thead>

		<tbody>
			<tr>
				<td>1</td>
				<td>小龙虾</td>
				<td>38</td>
				<td>1</td>
			<td>
				<button onclick="delRow(this)">删除</button>
				<button class="addBtn">添加</button>
			</td>
			</tr>

			<tr>
				<td>2</td>
				<td>螃蟹</td>
				<td>48</td>
				<td>2</td>
			<td>
				<button onclick="delRow(this)">删除</button>
				<button class="addBtn">添加</button>
			</td>
			</tr>

			<tr>
				<td>3</td>
				<td>蛋糕</td>
				<td>68</td>
				<td>1</td>
			<td>
				<button onclick="delRow(this)">删除</button>
				<button class="addBtn"">添加</button>
			</td>
			</tr>

			<tr>
				<td>4</td>
				<td>安慕希</td>
				<td>6</td>
				<td>1</td>
			<td>
				<button onclick="delRow(this)">删除</button>
				<button class="addBtn">添加</button>
			</td>
			</tr>

			<tr>
				<td>5</td>
				<td>矿泉水</td>
				<td>2</td>
				<td>1</td>
		
			<td>
				<button onclick="delRow(this)">删除</button>
				<button class="addBtn">添加</button>
			</td>
			</tr>

				<tr>
				<td>6</td>
				<td>生蚝</td>
				<td>30</td>
				<td>1</td>
		
			<td>
				<button onclick="delRow(this)">删除</button>
				<button class="addBtn">添加</button>
			</td>
			</tr>
			<tr>
			<td colspan="5">
				<p>
					总计
				</p>
			</td>
		</tr>
		</tbody>
	</table>
	
<!--弹框-->
	<div class="shade" style="display: none">
		<div class="form-panel">
			<h5 class="form-header">请输入表单信息</h5>
			<div class="form-inner">
				<input name="goods" type="text" value="" placeholder="请输入商品名称">
				<input name="price" type="text" value="" placeholder="请输入商品单价">
				<input name="num" type="text" value="" placeholder="请输入商品数量">
				<div class="options">
					<button class="comfirmBtn">确定</button>
					<button class="concelBtn">取消</button>
				</div>
			</div>
			<!--这是右上角关闭的×-->
			<div class="cha">
				<em></em>
			</div>
		</div>
	</div>

<script type="text/javascript" src="statics/js/jquery.js"></script>
<script type="text/javascript">
  
	$("tbody tr:odd").addClass("even");

    /*点击删除时可以删除一行*/
	function delRow(abt){
		$(abt).parent().parent().remove();
	}

	var showForm=function(){
		$(".shade").show();
	}
    /*点击×就关闭*/
	$(".cha").click(function(){
		$(".shade").hide(); 
		/*清空input标签里面的内容*/
		$("input[name=goods]").val("");
		$("input[name=price]").val("");
		$("input[name=num]").val("");
	});

     /*表格中的添加事件*/
    $(".addBtn").click(function(){
    	$(".shade").show();
    });
 
    /*定义一个函数 对应169行*/ 
    var showForm=function(){
    	$(".shade").show();
    }


   
    /*弹出框中的确定*/
	$(".comfirmBtn").click(function(){    	
		$(".shade").hide();

		/*先获取tbody中的行数*/
		var ntr=$("tbody tr").length;
		var sn=$("tbody tr:eq(" +(ntr-2)+")").find("td:first").text();

    	var name=$("input[name=goods]").val();
    	var price=$("input[name=price]").val();
    	var num=$("input[name=num]").val();
    	
    	/*插入行 紫色的反斜杠表示换行 （方便代码过长的）*/

    	var tr="<tr><td>"+(parseInt(sn)+1)+"</td><td>"+name+"</td><td>"+price+"</td><td>"+num+"</td><td>\
    	<button>删除</button> <button onclick='showForm()'>添加</button></td></tr>";
         
         /*把行添加到表格最后一行的下面*/
    	$("tbody tr:eq("+(sn-1)+")").after(tr);

	});
	/*弹窗中的取消*/
	$(".concelBtn").click(function(){
		$(".shade").hide();

	});

</script>


</body>
</html>